<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '导航' " left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view style="width: 100%; height: 100%;">
                <map style="width: 100%; height: 100%;" id="myMap" show-location="true" :latitude="userLocation.latitude" 
                :longitude="userLocation.longitude" :markers="markers" > </map>
            </view>
        </scroll-view>
        <!-- 添加导航按钮 -->
        <view class="navigate-button">
            <van-button type="primary" @click="navigateToLocation">导航到目的地</van-button>
        </view>
    </view>
</template>

<script>

export default {
    data () {
        return {
            navBarTitle: '导航',
            scrolling: false,
            params: {
                
            }, // 接受从路由传过来的参数
            merchantLocation: {
                latitude: '23.129163',
                longitude: '113.264435'
            },
            userLocation: {
                latitude: '23.129163',
                longitude: '113.264435'
            },
            markers: [ // 新增标记点数组
                {
                    id: 1,
                    latitude: '',
                    longitude: '',
                    iconPath: 'https://example.com/shop.png',
                    title: '商家位置',
                    width: 30,
                    height: 30
                },
                {
                    id: 2,
                    latitude: '',
                    longitude: '',
                    iconPath: 'https://example.com/user.png',
                    title: '我的位置',
                    width: 30,
                    height: 30
                }
            ]
        }
    },
    onLoad (data) {
        if (data !== null) {
            this.params=JSON.parse(decodeURIComponent(data.params))
            if(this.params){
                this.merchantLocation = this.params.merchantLocation
                this.userLocation = this.params.userLocation
            }
        }
    },
    onReady() {
        // 初始化地图上下文
        this.mapContext = wx.createMapContext('myMap', this)

        // 设置标记点坐标
        this.markers[0].latitude = this.merchantLocation.latitude
        this.markers[0].longitude = this.merchantLocation.longitude
        this.markers[1].latitude = this.userLocation.latitude
        this.markers[1].longitude = this.userLocation.longitude

        // 包含所有标记点
        this.mapContext.includePoints({
            points: [
                {
                    latitude: this.merchantLocation.latitude,
                    longitude: this.merchantLocation.longitude
                },
                {
                    latitude: this.userLocation.latitude,
                    longitude: this.userLocation.longitude
                }
            ],
            padding: [40, 40, 40, 40] // 设置地图内边距
        })
    },
    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 导航到指定位置
        navigateToLocation() {
            const { latitude, longitude } = this.merchantLocation;
            wx.openLocation({
                latitude: parseFloat(latitude),
                longitude: parseFloat(longitude),
                scale: 18, // 缩放比例，范围 5~28，默认为 18
                success: () => {
                    console.log('成功打开地图导航');
                },
                fail: (err) => {
                    console.error('打开地图导航失败', err);
                }
            });
        }

    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.navigate-button {
    padding: 15px 24px;
    text-align: center;
    width:calc(100% - 48px)
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
::v-deep .van-button--normal {
    width: 100%;
    border-radius: 50px;
}

</style>
